﻿@model IndignadoFramework.FrontOffice.Models.RegisterModel

@{
	ViewBag.Title = "Registro de Usuario";
}

<h2>Registro de Usuario</h2>

<!-- CSS para botones de Facebook y Twitter -->
@*<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Social.css")" />*@
<!-- GoogleMaps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var fing = new google.maps.LatLng(-34.919022724095015, -56.16678233238224);
	var marker;
	var map;
	var geocoder;

	window.onload = function (e) {
		var mapOptions = {
			zoom: 13,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center: fing
		};
		geocoder = new google.maps.Geocoder();
		map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);

		marker = new google.maps.Marker({
			map: map,
			draggable: true,
			animation: google.maps.Animation.DROP,
			position: fing
		});

		document.getElementById("UbicacionX").value = fing.lat();
		document.getElementById("UbicacionY").value = fing.lng();

		google.maps.event.addListener(map, 'click', function (event) {
			var newLatLng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
			marker.setPosition(newLatLng);
			map.panTo(newLatLng);
			document.getElementById("UbicacionX").value = event.latLng.lat();
			document.getElementById("UbicacionY").value = event.latLng.lng();
		});

		google.maps.event.addListener(marker, 'mouseup', function (event) {
			document.getElementById("UbicacionX").value = event.latLng.lat();
			document.getElementById("UbicacionY").value = event.latLng.lng();
			map.panTo(event.latLng);
		});
	}

	function codeAddress() {
		var address = document.getElementById("address").value;
		geocoder.geocode({ 'address': address }, function (results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var newLatLng = results[0].geometry.location;
				marker.setPosition(newLatLng);
				document.getElementById("UbicacionX").value = newLatLng.lat();
				document.getElementById("UbicacionY").value = newLatLng.lng();
			} else {
				alert("No se ha encontrado la dirección");
			}
		});
	}
</script>

@*<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*@

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "reg_form" } ))
{
	@Html.ValidationSummary(true, "El Registro no se pudo completar satisfactoriamente. Por favor vuelva a intentarlo.")

	<div id="social-root"></div>
    <div id="fb-root"></div>
	<script type="text/javascript">
		window.fbAsyncInit = function () {
			FB.init({ appId: '279088262186683',
				status: true,
				cookie: true,
				xfbml: true,
				oauth: true
			});

			function updateButton(response) {
				// Campos del form a ser enviados
				var name = document.getElementById('Nombre');
				var email = document.getElementById('Mail');
				var fb_id = document.getElementById('SocialId');
				var social = document.getElementById('RedSocial');

				if (response.authResponse) {
					// El usuario esta logueado y conectado con nuestro sitio
					FB.api('/me',
						function (response) {
							// Seteo variables del form
							name.value = response.name;
							email.value = response.email;
							fb_id.value = response.id;
							social.value = 'F';
						}
					); // FB.api
				} else {
				}
			}

			// run once with current status and whenever the status changes
			FB.getLoginStatus(updateButton);
			FB.Event.subscribe('auth.statusChange', updateButton);
		};

		(function () {
			var id, e = 'facebook-jssdk'; e = document.createElement('script');
			e.id = id; e.async = true; e.src = document.location.protocol
			+ '//connect.facebook.net/es_LA/all.js';
			document.getElementById('social-root').appendChild(e);
		} ());
	</script>
    
	<div id="reg-info">
		<fieldset>
			<legend>Informacion de Registro</legend>

			<div class="editor-label">
				@Html.LabelFor(m => m.Nombre)
			</div>
			<div class="editor-field">
				@Html.TextBoxFor(m => m.Nombre)
				@Html.ValidationMessageFor(m => m.Nombre)
			</div>

			<div class="editor-label">
				@Html.LabelFor(m => m.Mail)
			</div>
			<div class="editor-field">
				@Html.TextBoxFor(m => m.Mail)
				@Html.ValidationMessageFor(m => m.Mail)
			</div>

			<div class="editor-label">
				Marque o arrastre la marca a su ubicacion actual
			</div>
			<div id="contenedorMapa">
				<div id="busquedamapa">
					Dirección: <input id="address" type="text" value="">
					<input type="button" value="Buscar" onclick="codeAddress()">
				</div>
				<div id="map_canvas" style="width: 500px; height: 400px; margin-top:10px;">map div</div>
			</div>

			<div class="editor-label">
				@Html.LabelFor(m => m.CategoriasTematicas)
			</div>
			<div class="editor-field">		
				@if (Model.CategoriasTematicas.Any())
    {
        for (var i = 0; i < Model.CategoriasTematicas.Count(); i++)
        {
						<input type="checkbox" name="CategoriasTematicas" value="@Model.CategoriasTematicas[i]" />@Model.CategoriasTematicas[i]<br />
        }
    }
				@Html.ValidationMessageFor(m => m.CategoriasTematicas)
			</div>

            <!-- Atributos no desplegados del form -->
			@Html.HiddenFor(m => m.UbicacionX)
			@Html.HiddenFor(m => m.UbicacionY)
			@Html.HiddenFor(m => m.RedSocial)
			@Html.HiddenFor(m => m.SocialId)

			<p>
				<input type="submit" value="Registrar" />
			</p>
		</fieldset>
	</div>
}
